<template>
    <div class="container">
        <!-- 头部 -->
        <van-nav-bar 
        title='提现记录' 
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft">
            <template #right>
                <div @click="toUser" class="nav-img"><img src="../assets/user.png" ></div>
            </template>
        </van-nav-bar>
        <!-- 切换按钮 -->
        <div class="content" v-show="false">
            <div class="tab">
                <div class="tab-hd">
                    <div class="tab-item" 
                        v-for="item in tabList" 
                        :class="currentIndex==item.id?'on':''"
                        @click="changeItem(item.id)"
                        :key="item.id">
                        {{item.name}}
                    </div>
                </div>
                <div class="tab-bd">
                    <div class="tab-list">
                        <div class="list-item" v-if="currentIndex==0">
                            <div class="wrap-item">
                                <div class="title">
                                    <div class="pic">
                                        <img src="../assets/withdraw.png" alt="">
                                    </div>
                                    <div class="text">提现</div>
                                </div>
                                <div class="num on">+￥500.00</div>
                            </div>
                            <div class="wrap-item">
                                <div class="title">
                                    <div class="pic">
                                        <img src="../assets/time.png" alt="">
                                    </div>
                                    <div class="text">申请提现时间</div>
                                </div>
                                <div class="num">2021-09-01  12:01:11</div>
                            </div>
                            <div class="wrap-item">
                                <div class="title">
                                    <div class="pic">
                                        <img src="../assets/mode.png" alt="">
                                    </div>
                                    <div class="text">状态</div>
                                </div>
                                <div class="num">提现中</div>
                            </div>
                        </div>
                        <div class="list-item" v-if="currentIndex==1">
                            <div class="wrap-item">
                                <div class="title">
                                    <div class="pic">
                                        <img src="../assets/withdraw.png" alt="">
                                    </div>
                                    <div class="text">提现</div>
                                </div>
                                <div class="num on">+￥500.00</div>
                            </div>
                            <div class="wrap-item">
                                <div class="title">
                                    <div class="pic">
                                        <img src="../assets/time.png" alt="">
                                    </div>
                                    <div class="text">申请提现时间</div>
                                </div>
                                <div class="num">2021-09-01  12:01:11</div>
                            </div>
                            <div class="wrap-item">
                                <div class="title">
                                    <div class="pic">
                                        <img src="../assets/mode.png" alt="">
                                    </div>
                                    <div class="text">状态</div>
                                </div>
                                <div class="num in">已到帐</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
export default {
    data(){
        return{
            tabList:[
                {name:"提现中",id:0},
                {name:"已提现",id:1}
            ],
            currentIndex:0
        }
    },
    methods:{
        // 返回上一页面
        onClickLeft(){
            this.$router.go(-1);
        },
        // 去用户信息
		toUser(){
			this.$router.push({path:"/user"})
		},
        // 切换tab
        changeItem(id){
            this.currentIndex=id
        }
    }
}
</script>
<style lang="less" scoped>
.container{
    background-color: #F9F9FA;
    height: 100%;
}
/// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
.nav-img{
	img{
		width: 0.39rem;
		height: 0.39rem;
	}
}
// 主要内容
.content{
    margin-top: 0.25rem;
}
.tab-hd{
    font-size: 0.28rem;
    display: flex;
    justify-content: center;
    .tab-item{
        line-height: 0.6rem;
        color: #F09816;
        padding: 0 0.27rem;
        border: 1px solid #F09816;
    }
    .tab-item:nth-child(1){
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .tab-item:nth-child(2){
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .tab-item.on{
        background-color: #F09816;
        color: #fff;
    }
}

.list-item{
    background-color: #fff;
    padding: 0.2rem 0;
    margin: 0.2rem 0;
}
.wrap-item{
    font-size: 0.28rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.45rem;
    margin-top: 0.2rem;
    color: #828282;
    .title{
        display: flex;
        .pic{
            margin-right: 0.15rem;
        }
        img{
            width: 0.45rem;
            height: 0.45rem;
        }
    }
    .num.on{
        font-weight: 600;
        font-size: 0.28rem;
        color: #F09816;
    }
    .num.in{
        font-weight: 600;
        font-size: 0.28rem;
        color: #FF0000;
    }
}
</style>